"use client";

import { useEffect, useRef, useState } from "react";

import { useParams } from "next/navigation";

import Link from "next/link";

import { api, downloadAuthed, EvidenceItem, Investigation, TimelineEntry } from "@/lib/api";

export default function InvestigationDetail() {

  const { id } = useParams<{ id: string }>();

  const [inv, setInv] = useState<Investigation | null>(null);

  const [timeline, setTimeline] = useState<TimelineEntry[]>([]);

  const [evidence, setEvidence] = useState<EvidenceItem[]>([]);

  const [report, setReport] = useState<any | null>(null);

  const [reportId, setReportId] = useState<string | null>(null);

  const [err, setErr] = useState<string | null>(null);

  const fileRef = useRef<HTMLInputElement>(null);

  function loadEvidence() { api.evidenceList(id).then(setEvidence).catch(() => {}); }

  useEffect(() => {

    Promise.all([api.investigation(id), api.timeline(id)])

      .then(([i, t]) => { setInv(i); setTimeline(t); })

      .catch((e) => setErr(e.status === 401 ? "Sign in to view this investigation." : String(e)));

    loadEvidence();

  }, [id]);

  async function genReport() {

    try { const r = await api.createReport(id); setReport(r.report); setReportId(r.report_id); }

    catch { setErr("Report generation failed."); }

  }

  async function uploadEvidence(file: File) {

    try { await api.uploadEvidence(id, file); loadEvidence(); }

    catch (e: any) { setErr(e.status === 403 ? "Your role cannot attach evidence." : "Evidence upload failed."); }

  }

  if (err) return <div className="badge danger">{err}</div>;

  if (!inv) return <div className="muted">Loading…</div>;

  return (

    <div>

      <h1>{inv.title}</h1>

      <div className="row"><span className="badge">{inv.status}</span><span className="badge">{inv.priority}</span></div>

      <p className="muted">{inv.summary}</p>

      <div className="row" style={{ justifyContent: "space-between" }}>

        <h2 style={{ margin: 0 }}>Sighting timeline</h2>

        <button className="primary" onClick={genReport}>Generate report</button>

      </div>

      <div className="card" style={{ marginTop: 10 }}>

        <table>

          <thead><tr><th>Time</th><th>Plate</th><th>Camera</th><th>Dir</th><th>Conf</th></tr></thead>

          <tbody>

            {timeline.map((t, i) => (

              <tr key={i}>

                <td>{new Date(t.read_ts).toLocaleString()}</td>

                <td><Link href={`/vehicles/${t.plate_norm}`}>{t.plate_norm}</Link></td>

                <td className="muted">{t.camera_id?.slice(0, 8)}</td>

                <td>{t.direction || "-"}</td>

                <td>{t.confidence != null ? (t.confidence * 100).toFixed(0) + "%" : "-"}</td>

              </tr>

            ))}

            {!timeline.length && <tr><td colSpan={5} className="muted">No sightings attached.</td></tr>}

          </tbody>

        </table>

      </div>

      <h2>Evidence</h2>

      <div className="card">

        <div className="row" style={{ marginBottom: 10 }}>

          <input ref={fileRef} type="file" hidden onChange={(e) => e.target.files?.[0] && uploadEvidence(e.target.files[0])} />

          <button onClick={() => fileRef.current?.click()}>+ Attach evidence file</button>

          <span className="muted">SHA-256 hashed on upload; integrity verified on download.</span>

        </div>

        <table>

          <thead><tr><th>File</th><th>Size</th><th>SHA-256</th><th></th></tr></thead>

          <tbody>

            {evidence.map((e) => (

              <tr key={e.id}>

                <td><Link href={`/evidence/${e.id}`}>{e.filename}</Link></td>

                <td className="muted">{(e.size_bytes / 1024).toFixed(1)} KB</td>

                <td className="muted" style={{ fontFamily: "monospace", fontSize: 11 }}>{e.sha256.slice(0, 16)}…</td>

                <td><a style={{ cursor: "pointer" }} onClick={() => downloadAuthed(`/evidence/${e.id}/download`, e.filename)}>download</a></td>

              </tr>

            ))}

            {!evidence.length && <tr><td colSpan={4} className="muted">No evidence attached.</td></tr>}

          </tbody>

        </table>

      </div>

      {report && reportId && (

        <>

          <h2>Report</h2>

          <div className="card">

            <p>{report.sections?.executive_summary}</p>

            <strong>Key findings</strong>

            <ul>{(report.sections?.key_findings || []).map((f: string, i: number) => <li key={i}>{f}</li>)}</ul>

            <div className="row" style={{ marginTop: 8 }}>

              <span className="muted">Download:</span>

              {["markdown", "json", "csv", "pdf"].map((fmt) => (

                <a key={fmt} style={{ cursor: "pointer" }}

                   onClick={() => downloadAuthed(`/reports/${reportId}/download?format=${fmt}`,

                     `report.${fmt === "markdown" ? "md" : fmt}`)}>{fmt}</a>

              ))}

            </div>

          </div>

        </>

      )}

    </div>

  );

}